<template>
  <div class="outsideBg">
    <div class="bgPath">
      <div class="flex">
        <div class="flex flex-1 ranking">
          <rank-head-img :item="list[1]||{}" class="item2"></rank-head-img>
        </div>
        <div class="flex flex-1 ranking">
          <rank-head-img :item="list[0]||{}" class="item1"></rank-head-img>
        </div>
        <div class="flex flex-1 ranking">
          <rank-head-img :item="list[2]||{}" class="item3"></rank-head-img>
        </div>
      </div>
      <div class="sortBg">
        <div class="sortHeight">
          <div v-for="(item,index) in list" :key="index">
            <div class="border flex-pack-center">
              <div class="sort">{{item.candidateOrder}}</div>
              <div class="imgBorder flex-pack-center">
                <img :src="$DEV_ENV_API+'/api/'+item.cover" class="headImg">
              </div>
              <div class="fontBorder">
                <div class="name">{{item.name}}</div>
                <div class="quantity">{{item.votesNum}}票</div>
              </div>
              <div class="voteBirder flex-pack-end" @click="vote(item,index)">
                <img :src="!item.isVote?voteImg:isVoteImg" class="mm-image">
                <div class="voteFont">给TA投票</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="giftBg">
        <div class="giftHeight">
          <gift-item v-for="(item,index) in giftList" :item="item" :key="index"></gift-item>
        </div>
      </div>
      <div class="activityBg">
        <div class="activityHeight">
          <div class="activityBor bb1 h80">
            <div class="time">
              活动时间
            </div>
            <div class="timeCon">
              2019年5月15号-5月25号
            </div>
          </div>
          <div class="activityBor">
            <div class="time mt10">活动规则</div>
            <div class="timeCon">
              1.每个微信号每天只能投一票；<br>
            </div>
            <div class="timeCon">
              2.如发现违规刷票，取消活动资格；<br>
            </div>
            <div class="timeCon">
              3.本活动公平、公正、公开，欢迎监督；<br>
            </div>
            <div class="timeCon">
              4.最终解释权归艺星舞蹈所有。<br>
            </div>
          </div>
        </div>
      </div>
    </div>
     <div class="footer">
       <img src="../assets/activityIn/code.jpg" alt="">
       <div class="f-01">关注“艺星舞蹈生活馆”</div> 
    </div>
    <div class="footer02">有技术服务需求，请联系微信：wx12231626</div>
    <div v-transfer-dom>
      <x-dialog
        v-model="showDialogStyle"
        hide-on-blur
        :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent',display:'flex','justify-content':'center','align-items':'center'}"
      >
        <div class="voteSuccess flex-v">
          <span class="voteSuccess_title">投票成功</span>
          <span class="voteSuccess_content">
            当前
            <p>{{this.voteNums}}</p>票
          </span>
          <div class="voteSuccess_button" @click="closeDialog()">
            <span>关闭</span>
          </div>
        </div>
      </x-dialog>
    </div>
    <toast v-model="isVote" :time="1500" type="cancel" width="50%" position="middle">您今天已经投过票了</toast>
    <toast v-model="isClose" :time="1500" type="cancel" width="50%" position="middle">活动已经结束</toast>
    <toast v-model="isStart" :time="1500" type="cancel" width="50%" position="middle">活动暂未开始</toast>
  </div>
</template>
<script>
import RankHeadImg from "../component/rankHeadImg";
import GiftItem from "../component/giftItem";
import WechatService from "../assets/js/WechatService";
import { TransferDomDirective as TransferDom } from "vux";
import { XDialog, Toast } from "vux";
import { XTable } from "vux";
import { fstat } from 'fs';
export default {
  name: "rankPage",
  components: {
    GiftItem,
    RankHeadImg,
    XTable,
    XDialog,
    Toast
  },
  directives: {
    TransferDom
  },
  data() {
    return {
      list: [],
      giftList: [
        {
          id: 1,
          title: "一等奖（1名）",
          content: "中国舞、拉丁、街舞、爵士任一舞种一学期课"
        },
        { id: 2, title: "二等奖（1名）", content: "送16节以上四选一课程" },
        { id: 3, title: "三等奖（1名）", content: "送8节以上四选一课程" },
        { id: 4, title: "幸运奖（5名）", content: "送价值128元精美礼物一份" },
        { id: 5, title: "参与奖（若干）", content: "送价值58元精美礼物一份" }
      ],
      voteImg: require("../assets/rank/tp_button@2x.png"),
      isVoteImg: require("../assets/rank/tp1_button.png"),
      showDialogStyle: false,
      isVoteToday: false,
      voteNums: 1,
      isVote: false,
      isVoteToday: false,
      isClose: false,
      isStart:false
    };
  },
  mounted() {
    this.wxConfig();
  },
  created() {
    let vm = this;
    this.$http
      .get(this.$DEV_ENV_API + "/api/getCandidateList", {
        params: {
          priority: 3
        }
      })
      .then(resp => resp.data)
      .then(({ data }) => {
        vm.list = data;
        // for (let i = 0;i<10;i++) {
        //   vm.list.push(data[0])
        // }
        data.forEach(element => {
          element.isVote = false;
        });
        let newArray = [];
        let test = 0;
        for (let i = 0; i < vm.list.length; i++) {
          if (i == vm.list.length - 1) {
            vm.list[i] = Object.assign(
              { candidateOrder: test + 1 },
              vm.list[i]
            );
          } else {
            if (vm.list[i].votesNum == vm.list[i + 1].votesNum) {
              vm.list[i] = Object.assign(
                { candidateOrder: test + 1 },
                vm.list[i]
              );
            } else {
              vm.list[i] = Object.assign(
                { candidateOrder: test + 1 },
                vm.list[i]
              );
              test += 1;
            }
          }

          // vm.$set(data[i],"candidateOrder",i)
        }
      });
  },
  methods: {
    vote(item, index) {
      let activityStatus = sessionStorage.getItem("activityStatus")
      if (this.isVoteToday == true) {
        this.isVote = true;
      }else if (activityStatus == 0) {
        this.isStart = true;
      }else if(activityStatus == -1){
        this.isClose = true;
      } else {
        let openID = sessionStorage.getItem("openid");
        let param = new Object();
        param.openId = openID;
        // param.openId = 'o8ztj1mcTrMnF_HV-HYGcI46JeOw';
        param.candidateId = item.candidateId;
        let postParam = JSON.stringify(param);
        let that = this;
        this.$http
          .post(this.$DEV_ENV_API + "/api/postVotes", postParam)
          .then(res => {
            if (res.data.code == "1") {
              that.showDialogStyle = true;
              that.list[index].votesNum =
                parseInt(this.list[index].votesNum) + 1;
              that.voteNums = this.list[index].votesNum;
              item.isVote = true;
            } else {
              that.isVote = true;
              that.isVoteToday = true;
            }
          })
          .catch(err => {});
      }
    },
    //分享
    wxConfig() {
      let that = this;
      let url = that.$DEV_ENV_API + "/api/public/yixing/index.html?type=1";
      this.$http
        .get(that.$DEV_ENV_API + "/api/getSignature", {
          params: {
            url: location.href.split("#")[0]
          }
        })
        .then(res => {
          WechatService.shareConfig.imgUrl = encodeURI(
            "https://www.babywit.club/api/public/uploadFile/yxImage/yx_logo.jpg"
          );
          WechatService.shareConfig.title = "艺星舞蹈-人气明星评选";
          WechatService.shareConfig.desc =
            "艺星舞蹈—人气明星投票活动火热进行中，快来给你喜爱的选手投票吧!";
          WechatService.shareConfig.link =
            "https://www.babywit.club/api/public/yixing/index.html?type=1&candidateId=rank";
          WechatService.config(res.data.data, function(res) {
            WechatService.showShareMenu();
            WechatService.shareToAppMsg();
            WechatService.shareToTimeline();
          });
        })
        .catch(err => {});
    },
    closeDialog() {
      this.showDialogStyle = false;
      this.$root.$emit("navigatorTo","lesson");
    }
  }
};
</script>
<style lang="less" scoped>
@import "~vux/src/styles/1px.less";
.outsideBg {
  width: 100%;
  //background-color: #ed60b1;
}
.item2 {
  margin-top: 50px;
  margin-left: 20px;
}
.item1 {
  margin-top: 18px;
}
.item3 {
  margin-top: 70px;
  margin-left: -15px;
}
.scrolling {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.hidden {
  overflow: hidden;
}

.mm-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.flex-1 {
  flex: 1;
  -webkit-flex: 1;
}
.flex {
  display: flex;
  display: -webkit-flex;
}
.ranking {
  color: red;
  font-size: 12px;
  height: 320px;
}
/*垂直居中*/
.flex-align-center {
  align-items: center;
  -webkit-align-items: center;
}
/*居中对齐*/
.flex-pack-center {
  justify-content: center;
  -webkit-justify-content: center;
}
.bgPath {
  background-image: url("../assets/rank/pm_bj@3x.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-color: #f7d3e8;
  background-attachment: scroll;
}
.sortBg {
  background-image: url("../assets/rank/pm1_bj@3x.png");
  width: 90%;
  margin-left: 5%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 470px;
  padding-top: 1px;
}
.sortHeight {
  height: 438px;
  margin-top: 15px;
  /*margin-bottom: 10px;*/
  overflow-y: scroll;
}
.giftBg {
  background-image: url("../assets/rank/jp_bj@3x.png");
  width: 90%;
  margin-left: 5%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 470px;
  padding-top: 1px;
}
.giftHeight {
  height: 438px;
  margin-top: 23px;
  /*margin-bottom: 8px;*/
  overflow: hidden;
}
.activityBg {
  background-image: url("../assets/rank/jp_bj@3x.png");
  width: 90%;
  margin-left: 5%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 470px;
  padding-top: 1px;
  margin-bottom: 40px;
  margin-top: -2px;
}
.activityHeight {
  height: 438px;
  margin-top: 23px;
  margin-bottom: 10px;
  overflow: hidden;
}

.mm-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.border {
  width: 90%;
  display: flex;
  justify-content: center;
  height: 70px;
  margin-left: 5%;
  border-bottom: 1px solid #09808f;
}
.imgBorder {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: #ffffff;
  margin-left: 20px;
  margin-top: 10px;
}
.headImg {
  width: 100%;
  height:100%;
  border-radius: 10px;
}
.fontBorder {
  display: flex;
  flex: 4;
  flex-direction: column;
  justify-content: flex-start;
  height: 42px;
  margin-top: 14px;
  margin-left: 20px;
}
.name {
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  justify-content: flex-start;
  font-family: PingFang-SC-Regular;
}
.quantity {
  margin-top: 2px;
  text-align: center;
  color: #ffef89;
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
  font-family: PingFang-SC-Medium;
}
.sort {
  display: flex;
  width: 10px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #ffffff;
  font-family: PingFang-SC-Semibold;
}
.voteBirder {
  display: flex;
  width: 80px;
  position: relative;
}
.voteFont {
  position: absolute;
  top: 25px;
  left: 10px;
  font-size: 14px;
  color: #ffffff;
  font-family: PingFang-SC-Semibold;
}
/*居中对齐*/
.flex-pack-center {
  justify-content: center;
  -webkit-justify-content: center;
}
/*右对齐*/
.flex-pack-end {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
.voteSuccess {
  width: 270px;
  height: 198px;
  background-image: url("../assets/home/tp_bj@2x.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.voteSuccess_title {
  color: #ffffff;
  font-size: 28px;
  line-height: 20px;
  margin-top: 50px;
}
.voteSuccess_content {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2px;
}
.voteSuccess_content > p {
  color: #ffef89;
  font-size: 14px;
}
.voteSuccess_button {
  width: 80px;
  height: 47px;
  background-image: url("../assets/home/tp_button@3x.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.voteSuccess_button > span {
  width: 28px;
  height: 20px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  line-height: 20px;
}
.time {
  font-size: 16px;
  color: #ffffff;
  display: flex;
  font-family: PingFang-SC-Semibold;
  margin-left: 20px;
}
.timeCon {
  margin-top: 6px;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  font-family: PingFang-SC-Regular;
  margin-left: 20px;
}
.activityBor {
  width: 90%;
  display: flex;
  justify-content: center;
  margin-left: 5%;
  flex-direction: column;
}
.h80 {
  height: 80px;
}
.bb1 {
  border-bottom: 1px solid #09808f;
}
.mt10 {
  margin-top: 10px;
}
.footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  border-top: 1px solid #dcdcdc;
  margin-top: 20px;
  font-size:14px;
  color: #09808f;
}
.footer img{
  width: 50%;
  margin-top: 20px;
}
.f-01{
  margin-top: 20px;
}
.footer02{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  border-top: 1px solid #dcdcdc;
  margin-top: 80px;
  padding-top: 20px;
  color: #999999;
  font-size:12px;
}
</style>

